<template>
  <div>
    <md-popup v-model="isPopupShow" position="bottom">
      <p>本人已<span class="fontStyle">阅读</span>保险条款、产品说明书和投保提示书，<span class="fontStyle">了解</span>本产品的<span
          class="fontStyle">特点</span>和保单利益的<span class="fontStyle">不确定性</span></p>
      <p>本人已<img class="textImg" :src="commentData.text[0].img[0]" :key="commentData.text[0].img[0]">
        <img class="textImg" :src="commentData.text[0].img[1]" :key="commentData.text[0].img[1]">保险条款、产品说明书和投保提示书，
        <img class="textImg" :src="commentData.text[1].img[0]" :key="commentData.text[1].img[0]">
        <img class="textImg" :src="commentData.text[1].img[1]" :key="commentData.text[1].img[1]">本产品的
        <img class="textImg" :src="commentData.text[2].img[0]" :key="commentData.text[2].img[0]">
        <img class="textImg" :src="commentData.text[2].img[1]" :key="commentData.text[2].img[1]">和保单利益的
        <img class="textImg" :src="commentData.text[3].img[0]" :key="commentData.text[3].img[0]">
        <img class="textImg" :src="commentData.text[3].img[1]" :key="commentData.text[3].img[1]">
        <img class="textImg" :src="commentData.text[3].img[2]" :key="commentData.text[3].img[2]">
        <img class="textImg" :src="commentData.text[3].img[3]" :key="commentData.text[3].img[3]">
      </p>
      <any-sign ref="anySign" :EncAlg="EncAlg" :channel="channel" :formData="formData" :businessId="businessId"
        :templateType="templateType" :templateSerial="templateSerial" :signObj="signObj" :commentsObj="commentsObj"
        :contextId="contextId" @signSubmit="signSubmit" @signCallBack="signCallBack" @againImg="againImg" @cancelComment="cancelComment"
        @commentBack="commentBack()" :key="refreshKey">
      </any-sign>
    </md-popup>
    <md-button type="primary" @click="showCommentDialog(30)">批注</md-button>
    <md-button type="primary" @click="getSignData()">生成上传数据</md-button>
  </div>
</template>
<script>
  import {
    Button,
    Popup
  } from 'mand-mobile'
  import anySignMiniCore from '@/components/anySignMiniCore2.vue'
  export default {
    components: {
      [anySignMiniCore.name]: anySignMiniCore,
      [Button.name]: Button,
      [Popup.name]: Popup,
    },
    data() {
      return {
        refreshKey: null,
        num: 1,
        EncAlg: 'SM2',
        channel: '10086',
        formData: 'TESTData',
        businessId: '123123',
        templateType: '12',
        templateSerial: '111l1',
        contextId: [20, 21, 30],
        signObj: {
          signName: '李四',
          signIdNo: '513436198505073748',
          signLocaType: '1', //1:关键字定位 2:坐标定位
          signRuleKeyWord: {
            keyword: 'fxcl2',
            xOffset: '5',
            yOffset: '-5',
            pageNo: '1',
            KWIndex: '1'
          },
          signRuleXYZ: {
            left: '',
            top: '',
            right: '',
            bottom: '',
            pageNo: '',
            unit: ''
          },
          signatureConfig: {
            cid: '0',
            title: '请签名',
            titleSpanFromOffset: '4',
            titleSpanToOffset: '5',
            isTSS: false,
            nessesary: false,
            singleWidth: 50,
            singleHeight: 50,
            penColor: '#000000',
            signatureImgRatio: '1.0',
          },
          isOpenOcr: false,
          ocrObj: {
            iPAdress: 'https://dat-m.95549.cn/restful/ai/ocr/recognize',
            businessNo: '1909111995134355467',
            businessType: 'HANDWRITE_TEST',
            systemType: 'TEST',
          }
        },
        commentsObj: {
          signName: '李四',
          signIdNo: '513436198505073748',
          signLocaType: '1', //1:关键字定位 2:坐标定位
          signRuleKeyWord: {
            keyword: 'fxcl2',
            xOffset: '5',
            yOffset: '-5',
            pageNo: '1',
            KWIndex: '1'
          },
          signRuleXYZ: {
            left: '',
            top: '',
            right: '',
            bottom: '0',
            pageNo: '',
            unit: ''
          },
          commentConfig: {
            cid: '30',
            commitment: '',
            commentImgRatio: 3.0,
            mass_words_in_single_line: 2,
            mass_word_height: 50,
            mass_word_width: 50,
            comment_stroke_width: 10,
            penColor: '#000000',
            nessesary: false,
            comment_max_times: 2,
            isdistinguish: true
          },
          isOpenOcr: false,
          ocrObj: {
            iPAdress: 'https://dat-m.95549.cn/restful/ai/ocr/recognize',
            businessNo: '1909111995134355467',
            businessType: 'DEMO',
            systemType: 'GH-DEMO',
          }
        },
        isPopupShow: false,
        commentData: {
          text: [{
              value: '了',
              img: []
            }, {
              value: '了解',
              img: []
            },
            {
              value: '特点',
              img: []
            },
            {
              value: '不确定性',
              img: []
            }
          ],
          current: 0
        }
      }
    },
    methods: {
      showSignDialog(id) {
        this.$refs.anySign.signDialog(id)
      },
      // 批注
      showCommentDialog(id) {
        this.commentData.current = 0
        this.$refs.anySign.commentDialog(id)
        this.commentsObj.commentConfig.commitment = this.commentData.text[this.commentData.current].value
        for (let i = 0; i < this.commentData.text.length; i++) {
          this.commentData.text[i].img = []
        }
        this.refresh()
        this.isPopupShow = true
      },
      // 取消
      cancelComment() {
        console.log('取消')
        this.commentData.current = 0
        this.commentsObj.commentConfig.commitment = this.commentData.text[this.commentData.current].value
        for (let i = 0; i < this.commentData.text.length; i++) {
          this.commentData.text[i].img = []
        }
        this.refresh()
        this.isPopupShow = false
      },
      // 回退
      commentBack() {
        console.log('回退')
        let _this = this
        if (_this.commentData.text[_this.commentData.current].img.length <= 0) {
          setTimeout(() => {
            if (_this.commentData.current > 0) {
              _this.commentData.current--
              _this.commentData.text[_this.commentData.current].img = []
              _this.commentsObj.commentConfig.commitment = _this.commentData.text[_this.commentData.current].value
              _this.refresh()
            }
          }, 100)
        } else {
          _this.commentData.text[_this.commentData.current].img.pop()
        }
      },
      // 
      signCallBack({
        img,
        text
      }) {
        let _this = this
        _this.commentData.text[_this.commentData.current].img.push(img)
        if (_this.commentData.text[_this.commentData.current].value.length == _this.commentData.text[_this.commentData
            .current].img.length) {
              console.log(99999,_this.commentData.text[_this.commentData.current].img)
          setTimeout(() => {
            if (_this.commentData.current != _this.commentData.text.length - 1) {
              this.num++
              document.getElementById('comment_ok').click()
              _this.getSignData()
              if (_this.commentData.current < _this.commentData.text.length - 1) {
                _this.commentData.current++
                _this.commentsObj.commentConfig.commitment = _this.commentData.text[_this.commentData.current].value
                _this.refresh()
              }
            }
          }, 200)
        } else {
        }
      },
      // 初始化
      refresh() {
        this.refreshKey = new Date().getTime()
        this.$nextTick(function () {
          this.$refs.anySign.commentDialog(30)
        })
      },
      // 合成图片
      againImg(val) {
        console.log(val,'重新开始')
      },
      // 
      signSubmit(id, img, imgs) {
        if (this.commentData.current == this.commentData.text.length - 1) {
          this.isPopupShow = false
        }
      },
      // 生成上传数据
      getSignData() {
        let signData = this.$refs.anySign.getSignInfo()
        console.log(signData)
      }
    }
  }
</script>
<style lang="less" scoped>
  #refresh {
    width: 40px;
    height: 20px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 99999;
  }

  /deep/.md-popup {
    .md-popup-box {
      background-color: #ffffff;
      height: 100%;
    }
  }

  .textImg {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 10px;
  }

  .fontStyle {
    color: red;
  }

  .dialog {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 9999;
    background-color: #ffffff;
  }
</style>